---
title: 'first | Cypress Documentation'
description: Get the first DOM element within a set of DOM elements in Cypress.
sidebar_label: first
slug: /api/commands/first
---

<ProductHeading product="app" />

# first

Get the first DOM element within a set of DOM elements.

:::info

The querying behavior of this command matches exactly how
[`.first()`](http://api.jquery.com/first) works in jQuery.

:::

## Syntax

```javascript
.first()
.first(options)
```

### Usage

<Icon name="check-circle" color="green" /> **Correct Usage**

```javascript
cy.get('nav a').first() // Yield first link in nav
```

<Icon name="exclamation-triangle" color="red" /> **Incorrect Usage**

```javascript
cy.first() // Errors, cannot be chained off 'cy'
cy.getCookies().first() // Errors, 'getCookies' does not yield DOM element
```

### Arguments

<Icon name="angle-right" /> **options _(Object)_**

Pass in an options object to change the default behavior of `.first()`.

| Option    | Default                                                           | Description                                                                         |
| --------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| `log`     | `true`                                                            | Displays the command in the [Command log](/app/core-concepts/open-mode#Command-Log) |
| `timeout` | [`defaultCommandTimeout`](/app/references/configuration#Timeouts) | Time to wait for `.first()` to resolve before [timing out](#Timeouts)               |

<HeaderYields />

- `.first()` yields the new DOM element it found.
- `.first()` is a query, and it is _safe_ to chain further commands.

## Examples

### No Args

#### Get the first list item in a list

```html
<ul>
  <li class="one">Knick knack on my thumb</li>
  <li class="two">Knick knack on my shoe</li>
  <li class="three">Knick knack on my knee</li>
  <li class="four">Knick knack on my door</li>
</ul>
```

```javascript
// yields <li class="one">Knick knack on my thumb</li>
cy.get('li').first()
```

## Rules

<HeaderRequirements />

- `.first()` requires being chained off a command that yields DOM element(s).

<HeaderAssertions />

- `.first()` will automatically [retry](/app/core-concepts/retry-ability)
  until the element(s)
  [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).
- `.first()` will automatically [retry](/app/core-concepts/retry-ability)
  until all chained assertions have passed.

<HeaderTimeouts />

- `.first()` can time out waiting for the element(s) to
  [exist in the DOM](/app/core-concepts/introduction-to-cypress#Implicit-Assertions).
- `.first()` can time out waiting for assertions you've added to pass.

## Command Log

**_Find the first input in the form_**

```javascript
cy.get('form').find('input').first()
```

The commands above will display in the Command Log as:

<DocsImage
  src="/img/api/first/get-the-first-in-list-of-elements.png"
  alt="Command Log first"
/>

When clicking on `first` within the command log, the console outputs the
following:

<DocsImage
  src="/img/api/first/console-log-the-first-element.png"
  alt="console.log first"
/>

## See also

- [`.eq()`](/api/commands/eq)
- [`.last()`](/api/commands/last)
